<template>
  <view class="page">

    <video class="flex-1" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" autoplay :controls="false"></video>

    <!-- 头部 -->
    <view style="position: fixed;left: 0;right: 0;" :style="'top:'+statusBarHeight+'px'">
      <!-- 个人信息|观看详细信息 -->
      <view style="height: 80rpx;" class="px-2 flex justify-between align-center">
        <view style="width: 325rpx;background-color: rgba(0,0,0,0.4);" class="flex rounded-circle">
          <view class="p">
            <image src="/static/tabbar/min.png" style="width: 70rpx;height: 70rpx;" class="rounded-circle"></image>
          </view>
          <view class="flex-1 flex flex-column justify-center">
            <text class="text-white font">昵称</text>
            <text class="text-white font-sm">100</text>
          </view>
          <view class="p">
            <view class="rounded-circle flex align-center justify-center bg-danger" style="width: 70rpx;height: 70rpx;">
              <text class="text-white">+</text>
            </view>
          </view>
        </view>

        <view style="width: 325rpx;background-color: rgba(0,0,0,0.4);" class="flex rounded-circle">
          <scroll-view scroll-x="true" class="flex-1 flex">
            <view class="p" v-for="i in 20" :key="i">
              <image src="/static/tabbar/min.png" style="width: 70rpx;height: 70rpx;" class="rounded-circle"></image>
            </view>
          </scroll-view>
          <view class="p">
            <view class="rounded-circle flex align-center justify-center bg-danger" style="width: 70rpx;height: 70rpx;">
              <text class="text-white font-sm">1000</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 金币 -->
      <view style="height: 80rpx;" class="px-2 my-2">
        <view style="width: 325rpx;background-color: rgba(0,0,0,0.4);" class="flex rounded-circle align-center">
          <view class="p">
            <text class="text-warning">金币</text>
          </view>
          <view class="flex-1 flex flex-column justify-center">
            <text class="text-white font">100</text>
          </view>
        </view>
      </view>
      <!-- 收到礼物 -->
      <f-gift ref="gift"></f-gift>
    </view>

    <!-- 弹幕 -->
    <f-danmu ref="danmu"></f-danmu>

    <!-- 底部 -->
    <view style="position: fixed;left: 0;bottom: 0;right: 0;height: 120rpx;" class="flex align-center justify-between">

      <view class="flex-1 flex flex-column align-center justify-center" v-for="(item,index) in btns" :key="index">
        <text class="iconfont text-white mb-1">{{item.icon}}</text>
        <text class="text-white font">{{item.name}}</text>
      </view>

      <!-- <view class="flex align-center">
				<view class="btn btn-icon" @click="openCoin">
					<text class="iconfont text-white" style="font-size: 40px;">&#xe633;</text>
				</view>
				<view class="btn btn-icon bg-warning" @click="openGift">
					<text class="iconfont">&#xe67c;</text>
				</view>
				<view class="btn btn-icon">
					<text class="iconfont text-white">&#xe7cd;</text>
				</view>
				<view class="btn btn-icon" @click="back">
					<text class="iconfont text-white">&#xe607;</text>
				</view>
			</view> -->
    </view>

  </view>
</template>

<script>
import fGift from "@/components/live/f-gift.vue";
import fDanmu from "@/components/live/f-danmu.vue";
import uniPopup from "@/components/uni-ui/uni-popup/uni-popup.vue";

import demoGifts from "@/demo/gifts.js";

export default {
  components: {
    fGift,
    fDanmu,
    uniPopup,
  },
  data() {
    return {
      statusBarHeight: 0,
      content: "",
      gifts: [],
      giftActiveId: 0,

      mode: "SD",
      enableCamera: true,
      position: "back",
      beauty: 0,
      whiteness: 0,

      btns: [
        {
          name: "翻转",
          icon: "\ue605",
        },
        {
          name: "画质",
          icon: "\ue60c",
        },
        {
          name: "美颜",
          icon: "\ue632",
        },
        {
          name: "美白",
          icon: "\ue631",
        },
        {
          name: "更多",
          icon: "\ue84b",
        },
      ],
    };
  },
  onLoad(e) {
    let res = uni.getSystemInfoSync();
    this.statusBarHeight = res.statusBarHeight;

    let options = JSON.parse(e.options);
    this.mode = options.mode;
    this.position = options.position;
    this.beauty = options.beauty;
    this.whiteness = options.whiteness;
    // 演示
    this.gifts = demoGifts;
  },
  mounted() {
    // 送礼物演示
    // setInterval(()=>{
    // 	this.$refs.gift.send({
    // 		username:"发送人",
    // 		avatar:"",
    // 		gift_name:"蛋糕",
    // 		gift_image:"/static/gift/3.png",
    // 		num:1
    // 	})
    // },3000)
    // 发送弹幕演示
    // let id = 1
    // setInterval(()=>{
    // 	this.$refs.danmu.send({
    // 		id:id,
    // 		name:"昵称"+id,
    // 		content:"测试内容"+id
    // 	})
    // 	id++
    // },3000)
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style>
.page {
  flex: 1;
}
.btn {
  height: 80rpx;
  border-radius: 100rpx;
  background-color: rgba(255, 255, 255, 0.12);
  align-items: center;
  justify-content: center;
}
.btn-icon {
  width: 80rpx;
  margin-right: 20rpx;
}
</style>